<template>
  <div class="mainRight">
    <!-- 薪酬pk,因为要处理大量逻辑,所以分开写在组件里了 -->
    <!-- <salaryPK class="rankingList salaryPk" /> -->
    <!-- 职途工具分享组件 -->
    <careerPathTools class="rankingList careerPathTools" />

    <hotRecruitment
      v-if="isShowPosition"
      :showMoreButton="true"
      class="speHotRecruitment"
    />
    <!-- 我的关注 -->
    <div
      class="collectList"
      v-if="collectList[0].list && collectList[0].list.length > 0"
      v-show="!isShowPosition"
    >
      <div
        class="rankingItem"
        v-for="(item, index) in collectList"
        :key="index"
      >
        <div class="rankingTitle">
          {{ item.title }}
          <div class="moreCollect" @click="$parent.openCollectDialog">
            更多 >
          </div>
        </div>
        <div class="rankingLists">
          <div
            class="rankingContent"
            v-for="(_item, _index) in item.list.slice(0, 3)"
            @click="clickItem(_item)"
            :key="_index"
          >
            <div
              class="itemIndex"
              :style="{ color: _index >= 3 ? '#999999' : '' }"
            >
              {{ _index + 1 }}
            </div>
            <div class="itemInfo">
              <div class="itemName">{{ _item.positionName }}</div>
              <div class="itemDesc">
                {{ _item.positionDesc || '我的关注' }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 热搜职业榜 -->
    <div v-if="!isShowPosition" class="rankingList">
      <div
        class="rankingItem"
        v-for="(item, index) in rankingList"
        :key="index"
      >
        <div class="rankingTitle">
          <img :src="item.icon" class="titleIcon" />{{ item.title }}
        </div>
        <div class="rankingLists">
          <div
            class="rankingContent"
            v-for="(_item, _index) in item.list"
            :key="_index"
            @click="clickItem(_item)"
          >
            <div
              class="itemIndex"
              :style="{ color: _index >= 3 ? '#999999' : '' }"
            >
              {{ _index + 1 }}
            </div>
            <div class="itemInfo">
              <div class="itemName">{{ _item.positionName }}</div>
              <div class="itemDesc">
                {{ _item.positionDesc || '一览热搜职业榜' }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import hotRecruitment from '../jobSearchSide/components/hotRecruitment.vue';
import { hotSearchPositionList, collectPositionList } from '@/api/home.js';
import salaryPK from './components/salaryPK';
import careerPathTools from './components/careerPathTools';
export default {
  components: {
    salaryPK,
    careerPathTools,
    hotRecruitment
  },
  data() {
    return {
      SecretKey: '',
      rankingList: [
        {
          icon: require('@/assets/home/火焰@2x.png'),
          title: '热搜职业榜',
          list: []
        }
      ],
      collectList: [
        {
          icon: require('@/assets/home/喜爱数@2x.png'),
          title: '我的关注',
          list: []
        }
      ],
      isShowPosition: true
    };
  },
  created() {
    this.SecretKey =
      this.$route.query.SecretKey || localStorage.getItem('SecretKey');
    //河南测绘学院隐藏校招岗位
    if (this.SecretKey == '94cbe78f3bcec8be756042d1554c13b5') {
      this.isShowPosition = false;
    }
  },
  methods: {
    clickItem(item) {
      let routeData = this.$router.resolve({
        path: '/position-detail',
        query: {
          // fatherTitle: `${item.topTitle} · ${item.parentTitle}`,
          id: item.ylPositionId || item.positionId,
          name: item.positionName,
          superToken: this.$route.query.superToken || '',
          SecretKey: this.$route.query.SecretKey || '',
          customerName: this.$route.query.customerName,
          collect: true
        }
      });
      window.open(routeData.href, '_blank');
    },
    getCollectPositionList() {
      collectPositionList({
        searchPhotoType: 1
      }).then((res) => {
        if (res.code == 200) {
          this.collectList[0].list = res.data;
        }
      });
    },
    getHotSearchPositionList() {
      hotSearchPositionList().then((res) => {
        if (res.code == 200) {
          this.rankingList[0].list = res.data;
        }
      });
    }
  },
  mounted() {
    this.getCollectPositionList();
    this.getHotSearchPositionList();
  }
};
</script>

<style scoped lang="scss">
.mainRight {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  width: 216px;
  z-index: 1;

  .collectList {
    // position: sticky;
    top: 60px;
    margin-bottom: 12px;
    border-radius: 18px;
    padding: 14px;
    // height: 212px;
    background-image: linear-gradient(160deg, #d8ffef(0px), #FFFFFF(100px));
    .rankingItem {
      display: flex;
      flex-direction: column;
      height: 100%;
      .rankingTitle {
        position: relative;
        color: #100f0f;
        font-size: 16px;
        font-weight: 800;
        line-height: 22px;
        height: 20px;
        display: flex;
        align-items: center;
        .titleIcon {
          height: 18px;
          width: 18px;
          margin-right: 12px;
        }
        .moreCollect {
          position: absolute;
          padding: 10px;
          padding-right: 0;
          right: 6px;
          color: #a2a5b3;
          font-size: 14px;
          font-weight: 400;
          cursor: pointer;
          &:hover {
            color: #0b6eff;
            .itemName {
              color: #0b6eff;
            }
            .itemDesc {
              color: #3e70bb;
            }
          }
        }
      }
      .rankingLists {
        // height: 570px;
        width: 100%;
        // display: flex;
        // flex-direction: column;
        // overflow-y: auto;
        // overflow-x: hidden;
        .rankingContent {
          cursor: pointer;
          width: 100%;
          height: 35px;
          display: flex;
          align-items: center;
          margin-top: 18px;
          .itemIndex {
            width: 22px;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #076afe;
            line-height: 18px;
            padding: 10px 20px 10px 10px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .itemInfo {
            .itemName {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #222222;
              line-height: 18px;
              margin-bottom: 2px;
              width: 145px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .itemDesc {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #a2a5b3;
              line-height: 18px;
              width: 145px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              letter-spacing: 0.5px;
            }
          }
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }

  .rankingList {
    flex: 1;
    height: 216px;
    top: 60px;
    border-radius: 18px;
    padding: 18px 14px 14px 14px;
    max-height: 220px;
    background-image: linear-gradient(160deg, #d8ffef(0px), #FFFFFF(100px));
    &.salaryPk {
      flex: 0.88;
      z-index: 1;
      margin-bottom: 12px;
      min-height: 254px;
      max-height: 254px;
      overflow-y: hidden;
    }
    .rankingItem {
      display: flex;
      flex-direction: column;
      height: 100%;
      .rankingTitle {
        color: #100f0f;
        font-size: 16px;
        font-weight: 800;
        line-height: 22px;
        height: 20px;
        display: flex;
        align-items: center;
        position: relative;
        .titleIcon {
          height: 17px;
          width: 13px;
          margin-right: 12px;
          margin-left: 4px;
        }
      }
      .rankingLists {
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        .rankingContent {
          cursor: pointer;
          width: 100%;
          height: 35px;
          display: flex;
          align-items: center;
          margin-top: 18px;
          .itemIndex {
            width: 22px;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #076afe;
            line-height: 18px;
            padding: 10px 20px 10px 10px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .itemInfo {
            .itemName {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #222222;
              line-height: 18px;
              margin-bottom: 2px;
              width: 145px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .itemDesc {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #a2a5b3;
              line-height: 18px;
              width: 145px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              letter-spacing: 0.5px;
            }
          }
          &:hover {
            opacity: 0.8;
            .itemName {
              color: #0b6eff;
            }
            .itemDesc {
              color: #3e70bb;
            }
            .itemIndex {
              color: #0b6eff !important;
            }
          }
        }
      }
    }
  }

  .speHotRecruitment {
    overflow-y: scroll;
    border-radius: 18px;
    margin-bottom: 5px;
    padding: 18px 14px 14px 14px;
    background-image: linear-gradient(160deg, #d8ffef(0px), #FFFFFF(100px));
    &::-webkit-scrollbar {
      display: none;
    }
    &::-webkit-scrollbar-thumb {
      width: 0;
    }
  }
}
@media (max-width: 1200px) {
  .mainRight {
    display: none;
  }
}
.rankingLists::-webkit-scrollbar {
  width: 0 !important;
}
/*IE 10+*/
.rankingLists {
  -ms-overflow-style: none;
}
/*Firefox*/
.rankingLists {
  overflow: -moz-scrollbars-none;
}
.rankingLists::-webkit-scrollbar {
  width: 0;
}
.rankingLists::-webkit-scrollbar-thumb {
  background-color: transparent;
}
</style>
